<template>
  <div class="wrap">
    <img src="../../static/img/header-logo.jpg"
         alt="header-logo.jpg">
    <img src="../../static/img/school-picture.jpg"
         alt="school-picture.jpg">
    <div class="stu-reg">
      <p id="title">请输入要复位的学生的身份证号</p>
      <group>
        <x-input :show-clear="false"
                 text-align="center"
                 placeholder="请输入您的身份证号码"
                 style="border: 1px solid #AAA;border-radius: 2px;margin-bottom:1.17647059em"
                 v-model="value">
          <icon slot="right"
                :type="isShowIcon"
                @click.native="showIcon"></icon>
        </x-input>
      </group>
      <x-button type="primary"
                id="reg-but"
                @click.native="showconfirm = true">一键复位</x-button>
    </div>
    <div class="join">
      <p>三月软件，一群IT时代的精英，竭诚为您服务!</p>
      <grid>
        <grid-item label="三月软件公众号"
                   class="chat-img">
          <img slot="icon"
               src="../../static/img/wx-code.png"
               alt="weChat">
        </grid-item>
      </grid>
      <p style="font-size:11px; color:#F00;">
        如需帮助： 1.请到三月软件服务台咨询<br>
        地址:地球仪北侧<br>
        2.请联系三月软件服务人员:郝庆会:18838060418
      </p>
      <p style="font-size:11px; padding: 15px 0;">技术支持&copy;三月软件小组</p>
    </div>
    <div v-transfer-dom>
      <confirm v-model="showconfirm"
               @on-confirm="resetit">
        <p style="text-align:center;">{{context}}</p>
      </confirm>
    </div>
    <toast v-model="showsuc"
           type="success">{{msg}}</toast>
    <toast v-model="showwrong"
           type="warn">{{msg}}</toast>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
      showwrong: false,
      showsuc: false,
      isShowIcon: "",
      msg: "",
      showconfirm: false,
      context: "确定要复位此学生的信息吗?"
    };
  },
  watch: {
    value(newValue) {
      this.isShowIcon = newValue != "" ? "clear" : "";
    }
  },
  methods: {
    resetit() {
      let _this = this;
      let params = new URLSearchParams();
      params.append("card_id", _this.value);
      this.axios
        .post("/student/reset", params)
        .then(function(resp) {
          if (resp.data.code == 0) {
            _this.msg = resp.data.msg;
            _this.showsuc = true;
          } else if (resp.data.code == 1) {
            _this.msg = resp.data.msg;
            _this.showwrong = true;
          } else if (resp.data.code == 2) {
            _this.msg = resp.data.msg;
            _this.showwrong = true;
            setTimeout(() => {
              _this.$router.push("/admin/login");
            }, 1200);
          }
          _this.value = "";
        })
        .catch(function(error) {
          _this.msg = error;
          _this.showwrong = true;
        });
    },
    // 点击清空input框
    showIcon() {
      this.value = "";
    }
  }
};
</script>

<style scoped>
/*当屏幕尺寸小于670px时，应用下面的CSS样式*/
@media screen and (max-height: 670px) {
  .wrap {
    background: linear-gradient(#fff, #afd0e4);
  }
}
img {
  width: 100%;
  display: block;
}
.stu-reg {
  width: 80%;
  height: 170px;
  padding: 20px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  margin-top: 50%;
  background-color: #fff;
  box-shadow: #ccc 5px 5px 70px 0px;
}

#title {
  font-size: 18px;
  text-align: center;
  color: rgb(0, 160, 233);
  letter-spacing: 3px;
}

x-input {
  border: 1px solid #ddd;
  border-radius: 2px;
  margin-bottom: 10px;
}

#reg-but {
  background-color: rgb(0, 160, 233);
}

.join {
  margin-top: 135px;
}
.join p {
  text-align: center;
  font-size: 15px;
}
.chat-img /deep/ .weui-grid__icon {
  width: 80px;
  height: 80px;
}
.chat-img /deep/ .weui-grid__label {
  color: #333;
  font-size: 11px;
}
</style>


